<!--
 * @Author: your name
 * @Date: 2021-07-08 12:46:10
 * @LastEditTime: 2021-11-05 14:42:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\pages\systemSetting\column.vue
-->
<template>
  <div class="all">
    <div class="bot">
      <div class="permission-management--operate">
        <div class="permission-management--operate__left">
          <el-button
            @click="fixData"
            type="primary"
            style="
              width: 120px;
              height: 30px;
              background: #eaf2ff;
              margin-left: 10px;
              border: 1px solid #3579e0;
              border-radius: 5px;
              color: #3579e0;
              line-height: 8px;
            "
            >新增用户组</el-button
          >
        </div>
        <div class="permission-management--operate__right">
          <el-form :inline="true" :model="searchForm" ref="searchForm">
            <el-form-item prop="name">
              <el-input
                v-model="searchForm.name"
                placeholder="输入用户组名"
                style="width: 200px;height:30px;margin-top:-10px;"
              ></el-input>
            </el-form-item>
            <el-button
              @click="onSearch"
              type="primary"
              style="
              width: 70px;
              height: 30px;
              background: #3579E0;
              border: 1px solid #3579e0;
              border-radius: 5px;
              color: #FFFFFF;
              line-height: 8px;
            "
              >查询</el-button
            >
            <el-button
              @click="resetForm"
              type="primary"
              style="
              width: 70px;
              height: 30px;
              background: #ffffff;
              border: 1px solid #dcdde0;
              border-radius: 5px;
              color: #666666;
              line-height: 8px;
            "
              >重置</el-button
            >
          </el-form>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" height="720">
        <el-table-column prop="date" label="用户组名" align="center"> </el-table-column>
        <el-table-column prop="name" label="说明" align="center"> </el-table-column>
        <el-table-column prop="address" label="权限明细" align="center"> </el-table-column>
        <el-table-column prop="member" label="成员" align="center"> </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <span class="button" @click="RightsaccountItem(scope.row.name)">账号 </span>
            <span class="button" @click="UpdateMenuItem(scope.row.name, 'ediot')">
              编辑
            </span>
            <span class="button" @click="UpdateMenuItem(scope.row.name, 'check')">
              查看
            </span>
            <span class="button delete" @click="onActionConfirm(scope.row.name, modalType.delete)">
              删除
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="layout-body__footer">
        <el-pagination
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="currentPageSize"
          layout="total, prev, pager, next, sizes, jumper"
          :total="totalData"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 新建用户组 -->
    <el-dialog :title="title" :visible.sync="Modify" :close-on-click-modal="false" width="25%">
      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="80px">
        <el-form-item
          prop="username"
          label="用户名"
          :rules="{ required: true, message: '请输入用户名', trigger: 'blur' }"
        >
          <el-input v-model="dynamicValidateForm.username"></el-input>
        </el-form-item>
        <el-form-item
          prop="usergroupname"
          label="用户组名"
          :rules="{
            required: true,
            message: '请输入用户组名',
            trigger: 'blur'
          }"
        >
          <el-input v-model="dynamicValidateForm.usergroupname"></el-input>
        </el-form-item>
        <div class="listbot">
          <el-button style="margin-left: 70px" @click="Modifycancel">
            取消
          </el-button>
          <el-button
            style="margin-left: 30px; color: #ffffff; background: #3579e0"
            @click="Modifyconfirm('dynamicValidateForm')"
          >
            确认
          </el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 账号 -->
    <el-dialog title="" :visible.sync="Account" :close-on-click-modal="false" width="30%">
      <div class="Accountleft">
        <el-tag
          v-for="(tag, index) in checkedCities"
          :key="index"
          closable
          :disable-transitions="false"
          @close="handleClose(index)"
        >
          {{ tag.name }}
        </el-tag>
      </div>
      <div class="Accountright">
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
          <el-checkbox v-for="(city, index) in cities" :label="city" :key="index"> {{ city.name }}</el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="listbot">
        <el-button style="margin-left: 115px" @click="Accountcancel">
          取消
        </el-button>
        <el-button style="margin-left: 30px; color: #ffffff; background: #3579e0" @click="Accountconfirm">
          确认
        </el-button>
      </div>
    </el-dialog>
    <CommonDialog ref="CommonDialog" />
  </div>
</template>

<script>
import CommonDialog from '@/components/deleteDialog/deleteDialog.vue'
import { User } from '@/api/setting/service.js'
export default {
    name: '',
    components: {
        CommonDialog
    },
    props: {},
    data() {
        const EFilterOprator = this.$filterTrans.EFilterOprator
        return {
            currentPage: 1,
            currentPageSize: 10,
            totalData: 0,
            title: '新增用户组',
            dynamicValidateForm: {
                usergroupname: '',
                username: ''
            },
            checkedCities: [],
            cities: [],
            searchForm: {
                name: ''
            },
            searchCondition: [
                {
                    field: 'name',
                    operator: EFilterOprator.Equal
                }
            ],
            Modify: false,
            Account: false,
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    id: 1,
                    member: 'xiaoming',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    id: 2,
                    member: 'xiaoming',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    id: 3,
                    member: 'xiaoming',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    id: 4,
                    member: 'xiaoming',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ],
            modalType: {
                delete: {
                    type: 'delete',
                    tipInfo: '确定要删除该条数据吗？',
                    btnText: '删除',
                    callBack: 'ajaxDeleteTask'
                }
            }
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        this.onSearch()
        this.UserAllUserAsync()
    },
    methods: {
    // 操作二次确认
        onActionConfirm(_id, _modalInfo) {
            this.$refs.CommonDialog.Show(_modalInfo.type, _modalInfo.tipInfo, _modalInfo.btnText, () => {
                this.$refs.CommonDialog.OnHandleCancel()
                this[_modalInfo.callBack](_id)
            })
        },
        async ajaxDeleteTask(_id) {
            console.log(_id)
        },
        // 获取人员信息
        async UserAllUserAsync() {
            const vm = this
            try {
                const result = await User.UserGetAllUserAsync()
                if (result.success) {
                    vm.cities = result.data
                } else {
                    this.$message.error(result.message)
                }
            } catch (err) {
                // console.log('372')
                this.$message.error('服务器异常')
            }
        },
        handleCheckedCitiesChange() {},
        handleClose(_tag) {
            // console.log(_tag)
            this.checkedCities.splice(_tag, 1)
        },
        async getTaskList() {
            // let vm = this;
            // try {
            //   let data = vm.handleForm(vm.filter);
            //   let result = await LaunchService.taskList(data);
            //   if (result.success) {
            //     this.tableData = result.data;
            //     this.totalData = result.total;
            //   } else {
            //     this.$message.error(result.message);
            //   }
            // } catch (err) {
            //   this.$message.error("服务器异常");
            // }
        },
        onSearch() {
            this.currentPage = 1
            this.taskList = []
            this.filter = this.$filterTrans.buildPageRequest(this.searchForm, this.searchCondition)
            this.getTaskList()
        },
        resetForm() {
            // console.log(this.$refs.searchForm)
            this.$refs.searchForm.resetFields()
            this.onSearch()
        },
        // 点击 新建用户组按钮
        fixData() {
            this.Modify = true
        },
        // 新建用户组弹出框取消按钮
        Modifycancel() {
            this.Modify = false
        },
        // 新建用户组弹出框确认按钮
        Modifyconfirm(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.Modify = false
                    // console.log('333')
                } else {
                    console.log('error submit!!')
                }
            })
        },
        // 点击账号
        RightsaccountItem(_row) {
            console.log(_row)
            this.Account = true
        },
        // 账号弹出框取消按钮
        Accountcancel() {
            this.Account = false
        },
        // 账号弹出框确认按钮
        Accountconfirm() {
            this.Account = false
        },
        handleForm(_filter) {
            const filters = this.$filterTrans.filterParam(_filter.queryFilter.filters)
            const filter = JSON.parse(JSON.stringify(_filter))
            filter.queryFilter.filters = filters
            filter.pageIndex = this.currentPage
            filter.pageRow = this.currentPageSize
            return filter
        },

        UpdateMenuItem(_row, _str) {
            console.log(_row, _str)
        },
        onSizeChange(_val) {
            this.currentPageSize = _val
            this.currentPage = 1
            this.getTaskList()
        },
        onCurrentChange(_val) {
            this.currentPage = _val
            this.getTaskList()
        }
    }
}
</script>
<style lang="less" scoped src="@/assets/style/setting.less"></style>
<style lang="less" scoped>
.bot {
  height: 815px;
  margin: 31px;
  border-radius: 5px;
}
.permission-management--operate {
  padding: 20px 30px;
  background: #fff;
  display: flex;
  justify-content: space-between;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.permission-management--operate__left--add {
  margin-right: 10px;
  vertical-align: middle;
}
.permission-management--operate__left--addmess {
  vertical-align: middle;
  font-size: 12px;
}
.layout-body__footer {
  text-align: center;
  margin-top: 10px;
}
.el-table {
  padding: 0 30px;
}
.Accountleft {
  width: 40%;
  margin: 15px;
  padding: 10px;
  height: 300px;
  border: 1px solid #ddd;
  float: left;
}
.Accountright {
  width: 40%;
  padding: 10px;
  margin: 15px;
  height: 300px;
  border: 1px solid #ddd;
  float: left;
}

.listbot button {
  width: 138px;
  height: 30px;
  line-height: 7px;
  background: #ffffff;
  border: 1px solid #bfbfbf;
  border-radius: 15px;
  margin-top: 20px;
}
.el-form {
  height: 40px;
}
</style>
